<script lang="ts" setup>
import { tryit } from 'radash';
import { onMounted, ref } from 'vue';

import mockApi from '@/api/mock';
import { ListParams } from '@/api/model/mockModel';
import { SUCCESS_CODE } from '@/constants';
import { useListPage } from '@/hooks/useListPage';
import { useLoading } from '@/hooks/useLoading';
import { useTableHeight } from '@/hooks/useTableHeight';

import ItemView from '../../comopnents/ItemView.vue';
import SideView from '../../comopnents/SideView.vue';
import { INIT_DATA, list } from './data/index';

const containerRef = ref<HTMLDivElement>();
const formData = ref({ ...INIT_DATA });
const { searchRef, searchHeight } = useTableHeight();
const { loadingStart, loadingEnd } = useLoading(containerRef);
const { pageData, handlePageChange, search, reset, formRef } = useListPage(getData);
const sideValue = ref('1');
const tableData = ref([]);

async function getData() {
  loadingStart();

  const postData: ListParams = { ...pageData.params, search: { ...formData.value } };
  const [err, res] = await tryit(mockApi.list)(postData);

  if (!err && res.code === SUCCESS_CODE) {
    const { list, total } = res.data;
    tableData.value = list.map((item: any) => {
      return item.capture.face;
    });
    pageData.total = total;
  }
  loadingEnd();
}

onMounted(() => {
  getData();
});
</script>

<template>
  <div ref="containerRef" class="common-content face-wrap">
    <div class="common-side-view">
      <side-view v-model="sideValue" @change="getData"></side-view>
    </div>
    <div class="common-container" :style="{ height: '100%' }">
      <div ref="searchRef" class="common-search-view">
        <t-form ref="formRef" :data="formData" :colon="true" layout="inline" :label-width="0">
          <form-item v-for="(item, index) in list" :key="index" :form-data="formData" :data="item">
            <template #time> </template>
          </form-item>
          <div class="opt">
            <div class="item">
              <t-button theme="primary" @click="search">搜索</t-button>
              <t-button variant="outline" @click="reset">重置</t-button>
            </div>
          </div>
        </t-form>
      </div>
      <div class="common-content" :style="{ height: `calc(100% - ${searchHeight}px)` }">
        <div
          class="common-table-wrap transparent common-scrollbar"
          :style="{ height: `calc(100% - ${searchHeight}px)` }"
        >
          <t-row :gutter="[16, 16]" class="common-table-row">
            <t-col v-for="(item, index) in tableData" :key="index" :lg="4" :xs="6" :xl="3" :xxl="2">
              <item-view :data="item" url="recordFaceDetail"></item-view>
            </t-col>
          </t-row>
        </div>
      </div>

      <pagination-view
        v-if="!!pageData.total"
        :current="pageData.params.page"
        :total="pageData.total"
        :page-size="pageData.params.size"
        @page-change="handlePageChange"
      ></pagination-view>
    </div>
  </div>
</template>

<style lang="less" scoped>
.face-wrap {
  width: 100%;
  height: 100%;
  padding-top: 8px;

  .common-side-view {
    border-radius: 5px;
  }
}
</style>
